<!-- eslint-disable -->
<template>
  <div class="page-main">
    <el-row class="list-search">
      <div class="content-search">
        <el-form :inline="true" :model="data" @submit.native.prevent>
          <el-form-item label="用户昵称">
            <el-input v-model="data.nickname" type="text" size="small" placeholder="请输入用户昵称" clearable></el-input>
          </el-form-item>
          <el-form-item label="提现时间" class="search-item-auto">
            <el-date-picker
              size="small"
              v-model="data.created_at"
              type="datetimerange"
              value-format="yyyy-MM-dd HH:mm:ss"
              start-placeholder="提现时间开始时间"
              end-placeholder="提现时间结束时间"
              clearable>
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary" @click="search">搜 索</el-button>
            <el-button size="small" @click="searchReset">重 置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="separate-search">
      </div>
    </el-row>

    <el-row class="list-header">
      <div class="header-div">
        <div class="list-title">提现列表</div>
        <div class="div-header-btn">
          <!-- <el-button type="primary" size="small" @click="editTmp()">新 增</el-button> -->
          <el-radio-group v-model="data.status" @change="search" size="small">
            <el-radio-button label="-1">所有</el-radio-button>
            <el-radio-button label="0">提现中</el-radio-button>
            <el-radio-button label="1">提现成功</el-radio-button>
            <el-radio-button label="2">提现失败</el-radio-button>
          </el-radio-group>
        </div>
      </div>
    </el-row>

    <el-row>
      <el-table :data="dataList" v-loading="loading" size="medium" border
        :cell-style="{ padding: '8px 0' }"
        :header-cell-style="{ fontWeight: 'bold', color: '#333', backgroundColor: '#FAFAFA' }">
        <!-- <el-table-column prop="id" label="编号" width="70"></el-table-column> -->
        <el-table-column prop="nickname" label="用户" min-width="80"></el-table-column>
        <el-table-column prop="money" label="提现金额" min-width="80"></el-table-column>
        <el-table-column prop="charged_money" label="提现手续费" min-width="80"></el-table-column>
        <!-- <el-table-column prop="type" label="提现账户类型" min-width="100"></el-table-column> -->
        <el-table-column prop="type_name" label="提现账户" min-width="130">
            <template slot-scope="scope">
              <div>
                  <div>账户：{{scope.row.type_name}}</div>
                  <div>账号：{{scope.row.account}}</div>
              </div>
            </template>
        </el-table-column>
        <el-table-column prop="fail" label="拒绝原因" min-width="100"></el-table-column>
        <el-table-column prop="status" label="状态" min-width="70">
            <template slot-scope="scope">
              <div>
                  <div v-if="scope.row.status == 0"><el-tag type="danger">提现中</el-tag></div>
                  <div v-if="scope.row.status == 1"><el-tag type="">提现成功</el-tag></div>
                  <div v-if="scope.row.status == 2"><el-tag type="info">提现失败</el-tag></div>
              </div>
            </template>
        </el-table-column>
        <el-table-column prop="statusd_at" label="提现处理时间" min-width="100"></el-table-column>
        <el-table-column prop="createdAt" label="提现时间" min-width="100"></el-table-column>
        <el-table-column label="操作" min-width="120">
          <template slot-scope="scope" v-if="scope.row.status == 0">
            <el-button @click="editTmp(scope.row)" type="text" size="mini">拒绝</el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button @click="agree(scope.row)" type="text" size="mini">同意</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>

    <el-row class="pagination pagination-news">
      <div class="pagination-div">
        <div class="total-con">
          <div class="pagination-total">共 <em> {{totalCount}} </em> 条记录</div>
        </div>
        <el-pagination
          @current-change="changePage"
          @size-change="changePageSize"
          background
          :layout="pageLayout"
          :page-sizes="pagePageSizes"
          :page-size="pagePageSize"
          :total="totalCount"
          :current-page.sync="current_page"
          :hide-on-single-page="false">
        </el-pagination>
      </div>
    </el-row>

    <cashForm @refreshPage="refreshPage" ref="refCashForm"></cashForm>
  </div>
</template>

<!-- eslint-disable -->
<script>
  import {CashIndex, CashAgree} from '@/utils/request.js'
  import cashForm from './cash-form'
  import '@/assets/css/news.css';

  export default {
    components: { cashForm },
    data(){
      return {
        data: {
          page: 1,
          page_size: this.pagePageSize,
          status: -1
        },
        dataList: [],
        loading: false,
        totalCount: 0,
        current_page: 1,
        multipleSelection: [],
      }
    },
    activated() {
      this.data.page = 1
      this.current_page = 1
      this.getList()
    },
    methods: {
      agree(row) {
        this.$confirm('确定要同意吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          CashAgree({id: row.id}).then((res) => {
            if (res.code == 0) {
                this.refreshPage()
                this.$message.success(res.msg);
              } else {
                this.$message.error(res.msg);
              }
          })
        }).catch(() => {
          // 取消操作
        });
      },
      changePage(page) {
        this.data.page = page
        this.getList()
      },
      changePageSize(size) {
        this.data.page_size = size
        this.data.page = 1
        this.current_page = 1
        this.getList()
      },
      refreshPage() {
        this.data.page--
        this.getList()
      },
      getList() {
        this.loading = true
        CashIndex(this.data).then((res) => {
          if (res.code == 0) {
            this.data.page++
            this.dataList = res.data.data
            this.totalCount = res.data.count
          } else {
            this.$message.error('数据获取失败!')
          }
          this.loading = false
        })
      },
      editTmp(row) {
        if (row) {
          this.$refs.refCashForm.editTmp(row)
        } else {
          this.$refs.refCashForm.dialogFormVisible = true
        }
      },
      search() {
        this.data.page = 1
        this.current_page = 1
        this.getList()
      },
      searchReset() {
        this.data = {
          page: 1,
          page_size: this.data.page_size
        }
      },
    }
  }
</script>

<style>
</style>
